<template>
	<view class="login">
		<view class="title">带上薯片</view>
		<view class="loginBox">
			<uni-section class="buttonColor">
				<uni-easyinput prefixIcon="auth" class="uni-mt-5" trim="all" v-model="phone" placeholder="请输入手机号"></uni-easyinput>
			</uni-section>

			<uni-section class="buttonColor">
				<uni-easyinput prefixIcon="locked" type="password" v-model="password" placeholder="请输入密码"></uni-easyinput>
			</uni-section>
			<view class="handle">
				<text style="font-size: 25rpx;" @click="toRegister()">用户注册</text>
			<text style="font-size: 25rpx; text-align: right;">忘记密码</text>
			</view>
			

			<button class="loginButton" @click="login()">登 录</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { request } from '@/api/request'
import { getCurrentInstance, ref ,type Ref } from 'vue'
import type {AccountDto} from "@/api/model/account/AccountDto"

const phone = ref('')
const password = ref('')
const account:Ref<AccountDto | undefined> = ref()


const login = async() => {
	const operation = {
		method: 'POST',
		url: `/main/account/login/${phone.value}/${password.value}`,
		data: '',
		tokenRequired: false // 新增，表示是否需要token
	}
	const res = await request(operation)
	uni.setStorage({
		key:'token',
		data:`${res.data.token}`
	})
	// 根据token获取用户
	const operationToken = {
		method: 'GET',
		url: '/main/account/getByToken',
		data: '',
		tokenRequired: false //表示是否需要token
	}
	const resToken = await request(operationToken)
	account.value = resToken.data.account
	uni.setStorage({
		key:'account',
		data:account.value
	})
	uni.switchTab({
		url:'/pages/index/index'
	})
}

const toRegister = async() =>{
	uni.navigateTo({
		url: '/pages/login/registerView/register'
	})
}

</script>

<style lang="scss">
.login {
	display: flex; // 弹性盒
	flex-direction: column;
	align-items: center;
	//justify-content: center;
	height: 100vh;
	overflow: hidden;
	//background-image: url('~@/assets/images/首页.jpeg');

	.loginBox {
		width: 550rpx;
		background-color: rgba(0, 0, 0, 0);

		.buttonColor {
			background-color: rgba(0, 0, 0, 0);
		}
	}
	.title{
		margin-top: 300rpx;
		margin-bottom: 50rpx;
		font-size: 50rpx; 
	}
	.handle{
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
	}
}

.loginButton {
	top: 50rpx;
	width: 400rpx;
	height: 65rpx;
	background-color: aqua;
	text-align: center;
	line-height: 65rpx;
	font-size: 25rpx;
}


</style>